<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .password{
            background-color: #dedede;
            display: inline-block;
            position: relative;
            margin-top: 40px;
        }
        .password .user-input{
            font-size: 24px;
            width: 400px;
            border: none;
            border-bottom: 4px solid #dedede;
            outline: none;
            padding: 0.2em 0em;
        }
        .password .placeholder{
            font-size: 24px;   
            color: #999;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            /* 关闭元素的鼠标操作功能 */
            pointer-events: none;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            transition: all 200ms ease-in;
        }
        .password .placeholder .text{
            transition: all 200ms ease-in;
        }
        .password .iconfont{
            font-size: 16px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0;
            transition: all 200ms ease-in;
        }
        .password .line{
            height: 0px;
            font-size: 0px;
            padding: 0px;
            margin: 0px;
            border-bottom: 4px solid #31a7e2;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 0%;
            transition: all 200ms ease-in;
        }

        .password.active .placeholder{
            transform: translate(0,-100%);
        }
        .password.active .placeholder .text{
            font-size: 16px;
            color: #31a7e2;
        }
        .password.active .placeholder .iconfont{
            opacity: 1;
        }
        .password.active .line{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>pwd1:{{ pwd1 }}</p>
        <my-pwd v-model="pwd1"></my-pwd>

        <p>pwd2:{{ pwd2 }}</p>
        <my-pwd v-model="pwd2"></my-pwd>

        <p>pwd3:{{ pwd3 }}</p>
        <my-pwd v-model="pwd3"></my-pwd>
    </div>
    <script type="text/x-template" id="pwd">
        <div class="password" :class="{ active:modelValue.length!=0||flag }">
            <input class="user-input" :type="type" @focus="flag=true" @blur="flag=false" v-model="value">
            <div class="placeholder" >
                <span class="text">Password</span>
                <span class="iconfont icon-eye1" @click=" type= type=='text'?'password':'text' "></span>
            </div>
            <div class="line"></div>
        </div>
    </script>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"

        const MyPwd = {
            template:"#pwd",
            data(){
                return {
                    flag:false,
                    type:"password"
                }
            },
            props: {
                modelValue: {},
            },
            emits:["update:modelValue"],
            computed: {
                value:{
                    get(){
                        return this.modelValue
                    },
                    set(nv){
                        this.$emit("update:modelValue",nv)
                    }
                }
            },
        }


        createApp({
            components: {
                MyPwd,
            },
            data(){
                return {
                    pwd1:"",
                    pwd2:"",
                    pwd3:"11111"
                }
            }
        }).mount("#app")
    </script>
</body>
</html>